<template>
	<view class="local-culture-container">
		<!-- 1. 顶部轮播图 -->
		<!-- 		<view class="culture-swiper-container">
			<u-swiper
				:list="swiperList"
				keyName="image"
				indicator
				indicatorMode="dot"
				indicatorActiveColor="#FBD13E"
				:indicatorStyle="{ bottom: '20rpx', right: '30rpx' }"
				height="200"
				radius="10"
				imgMode="heightFix"
				circular
				@click="handleSwiperClick"
			>
			</u-swiper>
		</view> -->
	
		<!-- 2. 下方瀑布流 (复用 WaterfallPosts 组件) -->
		<waterfall-posts :left-list="leftList" :right-list="rightList" :load-status="loadStatus"
			:active-long-press-post-id="activeLongPressPostId" @itemClick="item => $emit('itemClick', item)"
			@like="item => $emit('like', item)" @longPress="id => $emit('longPress', id)"
			@touchEnd="$emit('touchEnd')" />

		<!-- 3. 加载更多提示 -->
		<u-loadmore :status="loadStatus" bg-color="#f8f8f8" />
	</view>
</template>

<script>
	// 引入已有的瀑布流组件
	import WaterfallPosts from '@/components/index/waterfall-posts/waterfall-posts.vue';

	export default {
		name: "LocalCulture",
		components: {
			WaterfallPosts
		},
		props: {
			// 轮播图数据
			swiperList: {
				type: Array,
				default: () => []
			},
			// 瀑布流左侧列表数据
			leftList: {
				type: Array,
				default: () => []
			},
			// 瀑布流右侧列表数据
			rightList: {
				type: Array,
				default: () => []
			},
			// 长按帖子的ID，用于显示特效
			activeLongPressPostId: {
				type: [String, Number],
				default: null
			},
			// 加载状态: 'loadmore', 'loading', 'nomore'
			loadStatus: {
				type: String,
				default: 'loadmore'
			}
		},
		methods: {
			handleSwiperClick(index) {
				const item = this.swiperList[index];
				// 如果轮播图需要点击跳转，可以在这里 emit 事件
				// this.$emit('swiperItemClick', item);
				console.log("Swiper item clicked:", item);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.local-culture-container {
		padding: 20rpx 0;
		background-color: #401505;
	}

	.culture-swiper-container {
		padding: 0 30rpx;
		margin-bottom: 30rpx;

	}
</style>